<template>
  <div class="course-content">
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in adList" :key="item.id">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>

    <course-content-list :fetch-data="fetchData"></course-content-list>
  </div>
</template>

<script>
import { getAllAds, getQueryCourses } from '@/services/course'
import CourseContentList from '@/components/CourseContentList'
export default {
  name: 'CourseContent',
  components: {
    CourseContentList
  },
  data () {
    return {
      adList: []
    }
  },
  created () {
    this.loadAds()
  },
  methods: {
    async loadAds () {
      const { data } = await getAllAds({
        spaceKeys: '999',
        status: 1
      })

      this.adList = data.content[0].adDTOList
    },
    fetchData (options) {
      return getQueryCourses(options)
    }
  }
}
</script>

<style lang="scss" scoped>
.van-swipe {
  width: 100%;
}

.van-swipe .van-swipe-item {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.van-swipe img {
  height: 170px;
  width: 100%;
}

.course-content-list {
  top: 220px;
  bottom: 50px;
}
</style>
